<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解决方案</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/list-J.css">
</head>

<body>
    <!-- 顶部 -->
    <div class="top">
        <div class="top-bx">
            <img src="img/logo.png" alt="" class="logo">
            <ul class="nav">
                <li><a href="http://10.35.164.4:81/index.html">网站首页</a></li>
                <li><a href="">传悦资源</a></li>
                <li><a href="http://10.35.164.4:81/listA.html">传悦案例</a></li>
                <li><a href="http://10.35.164.4:81/listJ.html">解决方案</a></li>
                <li><a href="">需求提交</a></li>
            </ul>
            <div class="con">
                <img src="img/properfuckingphone.png" alt="">
                <span style="color: #666666;">0535-60652189</span>
                <img src="img/qq.png" alt="">
                <img src="img/weibo.png" alt="">
                <img src="img/weixin.png" alt="">
                <img src="img/Email1.png" alt="">
            </div>
        </div>
    </div>
    <!-- 图片 -->
    <div class="picture">
        <div class="picture-bottom">
            <p class="picture-nav">
                <a href="">网站首页</a>
                <img src="img/right.png" alt="">
                <a href="">传悦观点</a>
            </p>
        </div>
    </div>

    <!-- 列表 -->
    <div class="list">
        <ul class="conlist">
            <li id="template" style="display: none;">
                <div class="data">
                    <p>2013-09</p>
                    <h2>27</h2>
                </div>
                <div class="cont">
                    <img src="" alt="" class="imgs ">
                    <div class="view">
                        <h4 class="headline"></h4>
                        <p class="label"></p>
                        <span class="content"></span>
                    </div>
                </div>
            </li>
        </ul>


        <!-- 小标 -->
        <ul class="page">
            <li>
                <</li>
                    <li class="first">1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>></li>
        </ul>
    </div>
    <!-- 底部 -->
    <div class="bottom">
        <div class="bottom-bx">
            <ul>
                <li>
                    <a href="">关于传悦</a>
                </li>
                <li>
                    <a href="">新闻动态</a>
                </li>
                <li>
                    <a href="">传悦观点</a>
                </li>
                <li>
                    <a href="">联系传悦</a>
                </li>
                <li>
                    <a href="">加入传悦</a>
                </li>
                <li>
                    <a href="">付款账户</a>
                </li>
            </ul>
            <p>
                Copyright 02013创梦网络 科技有限责任公司传悦 Chnyoo. cn || Rights Reserved <span>京ICF 备12005221号</span>
            </p>
        </div>
    </div>


    <script>
        let template = document.querySelector('#template');
        let conlist = document.querySelector('.conlist');

        // 返回所有解决方案信息
        let http = new XMLHttpRequest();
        http.open('get', 'http://10.35.164.4:81/jjfa');
        http.send();
        http.onreadystatechange = function() {
            if (http.readyState === 4) {
                let conList = JSON.parse(http.responseText);
                console.log(conList);
                conList.forEach(function(item, index) {
                    let clon = template.cloneNode(true);
                    clon.id = '';
                    clon.style.display = 'block';
                    conlist.appendChild(clon);
                    clon.querySelector('.imgs').setAttribute('src', item.imgurl);
                    clon.querySelector('.headline').innerHTML = item.headline;
                    clon.querySelector('.content').innerHTML = item.content;
                    clon.querySelector('.label').innerHTML = item.label;

                    // 点击事件
                    clon.onclick = function() {
                        location.assign(`http://10.35.164.4:81/jx?id=${item.id}`)
                    }
                })
                let li = document.querySelectorAll(".conlist li");
                if (li.length >= 1) {
                    li[1].className = "newlist";
                }
            }
        }
    </script>
</body>

</html>
<script></script>